<template>
	<view class="content bgc-f0">
<!-- 		<view>
			<image src="../../static/swiper/3.jpg" mode="" style="width: 100%;height: 360rpx;"></image>
		</view> -->
		
		<view class="p20">
			<view class="bgc-fff br12 p26">
				<view><text class="fs26 c-333">补差价产品</text></view>
				<view class="c-red mt15"><text class="fs24">￥</text> <text class="fs30 ml2">自定义价格</text>  </view>
			</view>
			
			<view class="mt20 br12 p26 z-flex z-flex-between bgc-fff" @click="handShowPay">
				<text class="fs26 c-333">选择套餐</text>
				<u-icon name="arrow-right" color="#999999" size="20" style="position: relative;top:-2rpx;"></u-icon>
			</view>
			
			<view class="p30 bgc-fff mt20 br12">
				<view class="c-theme t-c">-<text class="ml10 mr10 fs26">商品详情</text>-</view>
				<view class="bd1 mt30" style="width: 100%;min-height: 500rpx;"></view>
			</view>
		</view>
		
		<footerBottom>
			<view class="_pay" @click="handShowPay">
				立即购买
			</view>
		</footerBottom>
		
		<u-popup v-model="show" mode="bottom" safe-area-inset-bottom="true" closeable="true" border-radius="12">
			<view class="p30">
				<view><text>补差价产品</text></view>
				<view class="z-flex z-flex-between z-flex-align-c mt30"><text class="fs24 c-333">已选定：{{showPack.name}}</text> <text style="margin-left: auto;" class="c-red fs24">￥</text><text class="fs30 ml6 c-red">{{showPack.money}}</text></view>
				<view class="mt20"><text class="fs24 c-999">套餐</text></view>
				<view class="mt20 z-flex z-flex-between">
					<template v-for="(it,ind) in packageList">
						<view :key="ind" :class="['_pack',currentIndex === ind?'_pack_show':'']" @click="handClickPack(it,ind)">
							<text>{{it.name}}</text>
						</view>
					</template>
				</view>
				<view class="mt20 z-flex" style="align-items: flex-start;">
					<u-icon name="info-circle" color="#f0932b" size="26" style="position: relative;top: 6rpx;"></u-icon>
					<view class="ml10"><text class="fs24 c-999">您如果购买后需退还，请联系店铺协商后进行退款，具体退款方法请参见用户协议！</text></view>
				</view>
			</view>
			<view class="_line"></view>
			<view class="z-flex z-flex-between p30">
				<view><text class="mr10">支付：</text><text class="c-red fs24">￥</text><text class="fs30 ml6 c-red">{{showPack.money}}</text></view>
				<view class="_submit" @click="handPay">立即购买</view>
			</view>
		</u-popup>
		
		<u-modal v-model="showModal" title="请输入实际销售价格" show-cancel-button :title-style="{color: '#999999'}" @confirm="handConfirm">
			<view class="p20">
				<u-input v-model="price" type="number" input-align="center" border placeholder="输入价格"  />
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				show: false,
				showModal: false,
				price: '',
				showPack: {},
				packageList: [
					{name: '自定义几个',money: '自定义价格'}
				],
				currentIndex: 0
			}
		},
		onLoad(){
			
		},
		onShow(){
			this.showPack = this.packageList[0]
		},
		methods:{
			handShowPay(){
				this.show = true
			},
			handPay(){
				this.showModal = true
				
			},
			handClickPack(it,ind){
				this.showPack = it
				this.currentIndex = ind
			},
			handConfirm(){
				uni.showToast({
					title: '对接支付接口',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100vw;
		height: 100vh;
		overflow: auto;
		._submit,._pay{
			padding: 16rpx;
			background-color: $uni-color-theme;
			color: #FFFFFF;
			text-align: center;
			border-radius: 40rpx;
		}
		._pay{
			width: 88%;
			margin: 0 auto;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
		._submit{
			width: 200rpx;
		}
		
		._pack{
			border-radius: 40rpx;
			padding: 14rpx 20rpx;
			width: 49%;
			text-align: center;
			font-size: 22rpx;
			color: #333333;
			border: 1px solid #B9B9B9;
		}
		
		._pack_show{
			border-color: $uni-color-theme !important;
			color: $uni-color-theme !important;
		}
		
		._line{
			border-top: 1rpx solid #F0F0F0;
		}
	}
</style>
